<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue'
import * as echarts from 'echarts/core'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components'
import { BarChart,PieChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { LabelLayout } from 'echarts/features'

// 注册所需模块
echarts.use([
  GridComponent,
  BarChart,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  TitleComponent // 添加 TitleComponent 到 use 方法中
])

import { getReportEmpJob, getReportEmpGender } from '@/api/reportEmp'

// 柱状图相关
const barChartDom = ref(null)
const barChart = ref(null)

// 饼图相关
const pieChartDom = ref(null)
const pieChart = ref(null)

onMounted(async () => {
  try {
    // 获取职位数据
    const jobResult = await getReportEmpJob()
    if (!jobResult || !jobResult.data) {
      console.error('获取职位数据失败')
      return
    }

    const jobList = jobResult.data.jobList
    const dataList = jobResult.data.dataList

    // 初始化柱状图
    barChartDom.value = document.getElementById('bar-main')
    barChart.value = echarts.init(barChartDom.value)
    const barOption = createBarChartOption(jobList, dataList)
    barChart.value.setOption(barOption)

    // 获取性别数据
    const genderResult = await getReportEmpGender()
    if (!genderResult || !genderResult.data) {
      console.error('获取性别数据失败')
      return
    }

    const genderData = genderResult.data

    // 初始化饼图
    pieChartDom.value = document.getElementById('pie-main')
    pieChart.value = echarts.init(pieChartDom.value)
    const pieOption = createPieChartOption(genderData)
    pieChart.value.setOption(pieOption)
  } catch (error) {
    console.error('图表加载失败:', error)
  }
})

onBeforeUnmount(() => {
  if (barChart.value) barChart.value.dispose()
  if (pieChart.value) pieChart.value.dispose()
})

// 创建柱状图配置
const createBarChartOption = (jobList, dataList) => {
  return {
    title: {
      text: '员工职位统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: jobList
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '人数',
        type: 'bar',
        data: dataList
      }
    ]
  }
}

// 创建饼图配置
const createPieChartOption = (genderData) => {
  return {
    title: {
      text: '员工性别统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '10%',
      left: 'center'
    },
    series: [
      {
        name: '性别分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: genderData
      }
    ]
  }
}
</script>

<template>
  <div class="echarts-container">
    <div class="chart-row">
      <div class="chart-item">
        <div id="bar-main" style="width: 100%; height: 400px;"></div>
      </div>
      <div class="chart-item">
        <div id="pie-main" style="width: 100%; height: 400px;"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.echarts-container {
  padding: 20px;
}

.chart-row {
  display: flex;
  gap: 40px; /* 两个图表之间的间距 */
}

.chart-item {
  flex: 1;
  min-width: 400px; /* 最小宽度防止压缩过度 */
}
</style>